<template>
  <div id="recommend">
    <div v-for="(item,index) in recommends" :key="index">
      <a :href="item.link"><img :src="item.image" alt=""></a>
      <span>{{item.title}}</span>
    </div>
  </div>
</template>

<script>
export default {
props:{
  recommends:{
    type:Array,
    default () {
      return []
    }
  }
}
}
</script>

<style>
#recommend{
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  padding: 2vh 0;
  border-bottom: solid 8px #eee;
}
#recommend div{
  flex: 1;
}
#recommend img{
  width: 20vw;
}
#recommend span{
  margin-top: 4px;
  display: block;
}

</style>